<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-button type="primary">添加工作模式</el-button>
      </el-col>
      <!-- 列表 -->
      <el-col :span="24">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" label="工作模式编号" />
          <el-table-column prop="name" label="工作模式" width="200px" />
          <el-table-column prop="workPatternTypeDesc" label="类型" width="200px" />
          <el-table-column prop="workDate" label="工作日期" />
          <el-table-column label="工作时间">
            <template v-slot="{row}">
              {{ ((row.workEndMinute1 - row.workStartMinute1 )/24).toFixed(2) }} 小时
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="{row}">
              <el-button type="text" class="edit" @click="getManualDetil(row.id)">编辑</el-button>
              <span class="spn">|</span>
              <el-button type="text" class="del">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
      <!-- 分页 -->
      <el-col :span="24" type="flex" align="center">
        <el-pagination
          :current-page="data.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /></el-col>
    </el-row>

    <el-dialog
      title="提示"
      :visible.sync="showDialog"
      width="30%"
    >
      <!-- <el-tabs v-model="tableData">
        <el-tab-pane label="礼拜制">礼拜制</el-tab-pane>
        <el-tab-pane label="连续制">连续制</el-tab-pane>
      </el-tabs> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="showDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkPattern, getManualDetil } from '@/api/workArrangeManage'
export default {
  data() {
    return {
      tableData: [],
      data: {
        id: null, // 工作模式id
        name: '', // 工作模式名称
        workPatternType: '', // 工作模式类型
        workDate: '', // 工作日期
        workStartMinute1: null, // 工作开始时间
        workEndMinute1: null, // 工作结束时间
        workPatternTypeDesc: '',
        pageSize: 10,
        page: 0,
        pages: 0,
        counts: 0
      },
      showDialog: false

    }
  },
  created() {
    this.getWorkPattern()
  },
  methods: {
    async getWorkPattern() {
      const res = await getWorkPattern(this.data)
      this.tableData = res.items
      this.data.page = res.page
      this.data.pageSize = res.pageSize
      this.data.counts = +res.counts
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.data.pageSize = newSize
      this.getWorkPattern()
    },
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.data.page = newPage
      this.getWorkPattern()
    },
    async getManualDetil(id) {
      const res = await getManualDetil(id)
      console.log(res)
      this.showDialog = true
    }
  }
}
</script>
<style lang="scss" scoped>
.el-row{
  padding: 20px 20px 0 20px;
  background: #fff;
  .el-col{
  margin-bottom: 20px;
}
.spn{
  color:#dcdfe6;
}
.del{
  color: #f56c6c;
  margin-left: 11px;
}
.edit{
  margin-right: 11px;
}
}
.el-table{
  border: 1px solid #ebeef5;
}
</style>

